// app global css in SCSS form

.base-font {
  font-size: 10pt;
}

.title-font {
  font-size: 12pt;
}

.toggle-off {
  opacity: 0.3;
}

.sticky {
  position: sticky;
  z-index: 1;
}
.sticky-top {
  @extend .sticky;
  top: 0;
}
.sticky-bottom {
  @extend .sticky;
  bottom: 0;
}
.sticky-thead tr > *,
.sticky-tfoot tr > * {
  @extend .sticky;
}
.sticky-thead tr:last-child > * {
  top: 0;
}
.sticky-tfoot tr:first-child > * {
  bottom: 0;
}

td.q-space {
  max-width: 1px;
}

.narrow {
  tr,
  th,
  td {
    padding: 0px 8px !important;
    height: 23px !important;
  }
  td {
    height: 26px !important;
  }
  th:first-child,
  td:first-child {
    padding-left: 10px !important;
  }
  th:last-child,
  td:last-child {
    padding-right: 10px !important;
  }
  .q-field {
    &__native,
    &__prefix,
    &__suffix {
      line-height: 1.5;
    }
    &__control {
      padding: 0px 8px;
      height: 34px;
      &-container {
        padding: 0px;
      }
    }
    &__marginal {
      padding: 0px 2px;
      height: 34px;
    }
    &--standout.q-field--highlighted {
      .q-field__control {
        background: $blue-grey-6;
        box-shadow: $shadow-0;
      }
      .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-field__input {
        color: #fff
      }
    }
  }
  textarea.q-field__native {
    padding-top: 8px !important;
  }
  .q-textarea--autogrow .q-field__control {
    height: auto;
    min-height: 34px;
  }
}

// 文档样式
.doc {
  padding: 15px 50px;
  margin: auto;
  max-width: 1000px;
  .q-markdown--heading {
    &-h1,
    &-h2,
    &-h3,
    &-h4 {
      color: $primary;
    }
    &-h2 {
      margin-top: 30px;
      border-bottom: 1px solid #ccc;
    }
  }
  .q-markdown--code {
    padding: 0.5em 0.75em 0.5em 0.75em;
    background-color: #fff;
    background-image: linear-gradient(
      scale-color($primary, $lightness: 96%) 50%,
      transparent 0%
    );
    background-size: 3em 3em;
    background-origin: content-box;
    border-width: 1px 1px 1px 0px;
    border-style: solid;
    border-color: $grey-3;
  }
  .q-markdown--line-numbers {
    padding: 0.5em 0.75em 0.5em 0.75em;
    border-width: 1px 0px 1px 3px;
    border-style: solid;
    border-color: $grey-2;
    border-left-color: scale-color($primary, $lightness: 30%);
    border-radius: $generic-border-radius;
    -webkit-border-radius: $generic-border-radius;
    -moz-border-radius: $generic-border-radius;
    -ms-border-radius: $generic-border-radius;
    -o-border-radius: $generic-border-radius;
  }
}

@media screen and (max-width: 720px){
  .doc {
    padding: 10px 20px;
  }
}

// 按键样式
kbd {
  white-space: nowrap;
  display: inline-block;
  padding: 2px 4px 4px;
  line-height: 1;
  font-size: .8em;
  color: $grey-8;
  background: linear-gradient(-225deg,#d5dbe4,#f8f8f8);
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  box-shadow: inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,0.4);
  margin: 0 .2em;
}

// 调整输入框占位词颜色
$PLACEHODER_OPACITY: 0.4 !important;
.q-placeholder {
  &::-webkit-input-placeholder {
    opacity: $PLACEHODER_OPACITY;
  }
  &::-moz-placeholder {
    opacity: $PLACEHODER_OPACITY;
  }
  &:-ms-input-placeholder {
    opacity: $PLACEHODER_OPACITY;
  }
  &::-ms-input-placeholder {
    opacity: $PLACEHODER_OPACITY;
  }
  &::placeholder {
    opacity: $PLACEHODER_OPACITY;
  }
}

// 修复对话框最大化样式错误，并取消非最大化时的最大宽高限制
.q-dialog {
  &__inner {
    &--maximized {
      > div {
        height: 100% !important;
        width: 100% !important;
        max-height: 100vh !important;
        max-width: 100vw !important;
      }
    }
    &--minimized {
      > div {
        max-width: 100% !important;
        max-height: 100% !important;
      }
    }
  }
}
